<template>
	<view class="content">
		<view class="information">
			<view class="message">
				<view class="uni-form-item uni-column">
					<view class="title">产品名称：</view>
					<input class="uni-input" focus placeholder="自动获得焦点" />
				</view>
				<view class="uni-form-item uni-column">
					<view class="title">上传产品图：</view>
					<htz-image-upload
						:max="3"
						v-model="ceshiData"
						@uploadSuccess="ceshiUploadSuccess"
						action="http://localhost:8080/pages/index/contacts/contacts"
					></htz-image-upload>
				</view>
			</view>
			<view class="bottom"><button type="warn">确认预约</button></view>
		</view>
	</view>
</template>

<script>
import htzImageUpload from '@/components/htz-image-upload/htz-image-upload.vue';
export default {
	data() {
		return {
			ceshiData: []
		};
	},
	components: {
		htzImageUpload
	},
	methods: {
		ceshiUploadSuccess(res) {
			console.log(res);
			//上传成功
			/****************
				                因为上传接口返回的结构不一致，所以以下代码需要根据实际的接口返回结构开发，在此只是展示如果给数组里添加的过程，仅供参考
				                ***************/
			var _res = JSON.parse(res.data);
			if (_res.code == 200) {
				this.ceshiData.push(_res.result);
			}
			/*******************************/
		}
	}
};
</script>

<style lang="less">
.content {
	background: #f2f2f2;
	height: 93.4vh;
	.information {
		padding: 20upx;
		.message {
			width: 313px;
			height: 259px;
			background: #ffffff;
			box-shadow: 0px 1px 15px 0px rgba(204, 204, 204, 0.32);
			border-radius: 10px;
			padding: 20px;
			uni-view {
				display: block;
				font-size: 15px;
				color: #333333;
				margin: 10px 0;
			}
			uni-input {
				width: 97%;
				height: 40px;
				background: #f2f2f2;
				border-radius: 10px;
				padding-left: 10px;
			}
		}
		uni-button {
			border-radius: 30px;
			width: 70%;
			position: fixed;
			bottom: 5%;
			left: 15%;
		}
	}
}
</style>
